import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { CalendarIcon, ClockIcon, ShareIcon, BookmarkIcon, FacebookIcon, TwitterIcon, LinkedinIcon, ChevronRightIcon } from 'lucide-react';
export const ArticleDetailPage = () => {
  const {
    id
  } = useParams();
  // In a real application, you would fetch article data based on the ID
  // This is mock data for demonstration purposes
  const article = {
    id: id,
    title: 'How to Choose the Perfect Crib Mattress for Your Baby',
    excerpt: "Learn what materials are safest and how firmness affects your baby's sleep quality and development.",
    content: `
      <p>When it comes to setting up your baby's nursery, few decisions are as important as choosing the right crib mattress. Your baby will spend up to 70% of their early life sleeping, making their mattress one of the most-used items in your home.</p>
      <h2>Why Your Choice of Crib Mattress Matters</h2>
      <p>The right mattress doesn't just provide comfort—it's essential for your baby's safety, development, and quality of sleep. A proper mattress helps reduce the risk of Sudden Infant Death Syndrome (SIDS), supports developing bones and muscles, and creates a comfortable environment for restorative sleep.</p>
      <p>According to the American Academy of Pediatrics, babies should sleep on a firm, flat surface covered by a fitted sheet with no other bedding or soft objects to reduce the risk of SIDS and suffocation.</p>
      <h2>Types of Crib Mattresses</h2>
      <h3>Innerspring Mattresses</h3>
      <p>Innerspring mattresses use steel coils for support, covered with layers of cushioning and padding. When shopping for an innerspring crib mattress, look at:</p>
      <ul>
        <li><strong>Coil count:</strong> Generally, the more coils, the firmer and more durable the mattress. Look for at least 135-150 coils.</li>
        <li><strong>Steel gauge:</strong> This measures the thickness of the wire. Lower numbers indicate thicker, stronger wire.</li>
        <li><strong>Rod border:</strong> A steel rod around the perimeter adds stability and prevents edge sagging.</li>
      </ul>
      <p>Pros: Durable, good air circulation, familiar technology.</p>
      <p>Cons: Heavier, can be noisy when baby moves, may collect allergens over time.</p>
      <h3>Foam Mattresses</h3>
      <p>Foam mattresses are typically made from polyurethane foam. Key considerations include:</p>
      <ul>
        <li><strong>Density:</strong> Higher density foam provides better support. Press your hand into the mattress—it should quickly regain its shape.</li>
        <li><strong>Weight:</strong> Heavier foam mattresses are usually higher quality and more durable.</li>
        <li><strong>Certifications:</strong> Look for CertiPUR-US® certification to ensure the foam is made without harmful chemicals.</li>
      </ul>
      <p>Pros: Lightweight, no springs to poke through, typically less expensive.</p>
      <p>Cons: May be less durable, can retain heat, may off-gas initially.</p>
      <h3>Organic Mattresses</h3>
      <p>Organic mattresses are made from natural materials like cotton, wool, and natural latex. These mattresses:</p>
      <ul>
        <li>Minimize baby's exposure to chemicals and synthetic materials</li>
        <li>Are often naturally flame-resistant without chemical treatments</li>
        <li>May be more environmentally friendly</li>
      </ul>
      <p>Look for certifications like GOTS (Global Organic Textile Standard) or GOLS (Global Organic Latex Standard) to verify organic claims.</p>
      <p>Pros: No potentially harmful chemicals, often more breathable, environmentally friendly.</p>
      <p>Cons: More expensive, may be harder to clean, limited options.</p>
      <h2>Key Features to Consider</h2>
      <h3>Firmness</h3>
      <p>Babies need a firm sleep surface to reduce the risk of suffocation and SIDS. A mattress that feels uncomfortably firm to you is likely the right firmness for your baby. To test firmness, press your hand into the center and edges of the mattress—it should snap back quickly and not conform to the shape of your hand.</p>
      <h3>Waterproofing</h3>
      <p>Diaper leaks, spit-up, and other messes are inevitable. A waterproof cover or waterproof inner layer helps protect the mattress. If the mattress isn't waterproof, consider a separate waterproof mattress pad or cover.</p>
      <h3>Size and Fit</h3>
      <p>Federal regulations require all full-size crib mattresses to be at least 27 1/4 inches by 51 5/8 inches, with a thickness not exceeding 6 inches. The mattress should fit snugly in the crib—you shouldn't be able to fit more than two fingers between the mattress and the crib frame.</p>
      <h3>Weight</h3>
      <p>Consider how often you'll need to lift the mattress to change sheets or clean. Foam mattresses are typically lighter (7-8 pounds) compared to innerspring mattresses (15-25 pounds).</p>
      <h3>Dual-Firmness (2-Stage)</h3>
      <p>Some mattresses offer a firmer infant side and a softer toddler side. These "2-stage" mattresses can be flipped as your child grows, potentially offering longer usability.</p>
      <h2>Top-Rated Crib Mattresses of 2023</h2>
      <h3>Best Overall: Newton Baby Crib Mattress</h3>
      <p>The Newton Baby Crib Mattress stands out for its innovative Wovenaire® core, which is 90% air and 10% food-grade polymer. This creates a breathable sleep surface that reduces suffocation risk while being comfortable and supportive.</p>
      <p><strong>Price:</strong> $299-$349</p>
      <p><strong>Pros:</strong> Fully washable (cover and core), excellent breathability, no off-gassing.</p>
      <p><strong>Cons:</strong> Higher price point, requires special care for cleaning.</p>
      <h3>Best Budget: Safety 1st Heavenly Dreams Crib Mattress</h3>
      <p>This lightweight foam mattress offers excellent value without compromising on essential features. It has a firm surface and a water-resistant vinyl cover.</p>
      <p><strong>Price:</strong> $50-$80</p>
      <p><strong>Pros:</strong> Affordable, lightweight, water-resistant, GREENGUARD Gold certified.</p>
      <p><strong>Cons:</strong> Basic design, may not be as durable for extended use.</p>
      <h3>Best Organic: Naturepedic Organic Crib Mattress</h3>
      <p>Naturepedic's organic mattresses feature GOTS-certified organic cotton filling and covering with no polyurethane foam. Their waterproofing uses food-grade polyethylene rather than vinyl/PVC.</p>
      <p><strong>Price:</strong> $259-$399</p>
      <p><strong>Pros:</strong> No harmful chemicals, waterproof surface, dual-firmness options available.</p>
      <p><strong>Cons:</strong> Premium price, heavier than foam options.</p>
      <h3>Best Innerspring: Sealy Baby Firm Rest Crib Mattress</h3>
      <p>With 204 coils and border rods for edge support, this mattress offers excellent durability and support. It features a waterproof surface and anti-sag system.</p>
      <p><strong>Price:</strong> $120-$160</p>
      <p><strong>Pros:</strong> Durable construction, firm support, waterproof cover.</p>
      <p><strong>Cons:</strong> Heavier than foam options, may be noisy when baby moves.</p>
      <h3>Best Dual-Sided: Moonlight Slumber Little Dreamer</h3>
      <p>This foam mattress features a firm infant side and a plush toddler side, extending its usability as your child grows. It has a medical-grade, water-resistant cover.</p>
      <p><strong>Price:</strong> $199-$229</p>
      <p><strong>Pros:</strong> Grows with your child, lightweight, water-resistant, hypoallergenic.</p>
      <p><strong>Cons:</strong> Mid-range price point, foam may retain heat.</p>
      <h2>Care and Maintenance</h2>
      <p>To extend the life of your crib mattress and maintain a healthy sleep environment:</p>
      <ul>
        <li>Always use a fitted sheet designed specifically for crib mattresses</li>
        <li>Consider a waterproof mattress pad for additional protection</li>
        <li>Clean spills and accidents promptly according to manufacturer instructions</li>
        <li>Rotate the mattress every 2-3 months to ensure even wear</li>
        <li>Air out the mattress periodically by removing bedding</li>
      </ul>
      <h2>When to Replace a Crib Mattress</h2>
      <p>Replace your baby's mattress when:</p>
      <ul>
        <li>It shows visible signs of wear or damage</li>
        <li>It has developed permanent indentations or sagging</li>
        <li>It has been wet for an extended period and may harbor mold</li>
        <li>You're transitioning from one child to another (unless the mattress is in excellent condition)</li>
      </ul>
      <h2>Final Thoughts</h2>
      <p>When choosing a crib mattress, safety should always be your primary concern, followed by comfort and durability. While budget is certainly a factor, remember that your baby will spend thousands of hours on this surface during their crucial developmental years.</p>
      <p>By understanding the different types of mattresses available and the key features to consider, you can make an informed choice that provides your baby with a safe, comfortable sleep environment—and gives you peace of mind.</p>
    `,
    image: 'https://images.unsplash.com/photo-1556010334-d6ed191db491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    date: 'June 12, 2023',
    readTime: '7 min read',
    category: 'Sleep',
    stage: 'Newborn',
    author: {
      name: 'Dr. Emily Chen',
      title: 'Pediatric Sleep Specialist',
      image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80',
      bio: 'Dr. Emily Chen is a board-certified pediatrician specializing in infant and toddler sleep issues. With over 15 years of experience, she helps parents navigate the challenges of early childhood sleep patterns.'
    },
    relatedArticles: [{
      id: 'a4',
      title: 'Understanding Baby Sleep Cycles: A Science-Based Approach',
      excerpt: 'Discover how baby sleep patterns differ from adults and how you can use this knowledge to help your little one get better rest.',
      image: 'https://images.unsplash.com/photo-1590083948608-525d75ee5eee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      date: 'May 21, 2023',
      readTime: '6 min read',
      category: 'Sleep'
    }, {
      id: 'a8',
      title: 'Creating a Montessori-Inspired Nursery',
      excerpt: 'Design a nursery that fosters independence and learning with these Montessori principles and product recommendations.',
      image: 'https://images.unsplash.com/photo-1586015555751-63bb77f4322a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      date: 'April 24, 2023',
      readTime: '7 min read',
      category: 'Gear'
    }, {
      id: 'a2',
      title: 'The Ultimate Guide to Baby-Proofing Your Home',
      excerpt: "From cabinet locks to outlet covers, here's everything you need to create a safe environment for your curious crawler.",
      image: 'https://images.unsplash.com/photo-1556784344-ad913a86b2c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      date: 'June 5, 2023',
      readTime: '9 min read',
      category: 'Safety'
    }]
  };
  return <div className="w-full bg-cream">
      {/* Hero Section */}
      <div className="bg-white py-8 border-b border-gray-100">
        <div className="container mx-auto px-4 md:px-6">
          {/* Breadcrumbs */}
          <nav className="flex text-sm mb-6">
            <ol className="flex items-center space-x-2">
              <li>
                <Link to="/" className="text-gray-500 hover:text-terracotta">
                  Home
                </Link>
              </li>
              <li className="text-gray-500">/</li>
              <li>
                <Link to="/articles" className="text-gray-500 hover:text-terracotta">
                  Articles
                </Link>
              </li>
              <li className="text-gray-500">/</li>
              <li className="text-dark font-medium">{article.category}</li>
            </ol>
          </nav>
          {/* Article Header */}
          <div className="max-w-4xl mx-auto">
            <div className="mb-4">
              <span className="inline-block px-3 py-1 bg-green/20 text-green rounded-full text-sm font-medium">
                {article.category}
              </span>
              <span className="inline-block px-3 py-1 bg-yellow/20 text-yellow-800 rounded-full text-sm font-medium ml-2">
                {article.stage}
              </span>
            </div>
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              {article.title}
            </h1>
            <p className="text-gray-600 text-lg mb-6">{article.excerpt}</p>
            {/* Article Meta */}
            <div className="flex flex-wrap items-center justify-between border-b border-gray-200 pb-6 mb-6">
              <div className="flex items-center mb-4 md:mb-0">
                <img src={article.author.image} alt={article.author.name} className="w-12 h-12 rounded-full object-cover mr-3" />
                <div>
                  <p className="font-medium">{article.author.name}</p>
                  <p className="text-sm text-gray-500">
                    {article.author.title}
                  </p>
                </div>
              </div>
              <div className="flex flex-wrap items-center gap-4">
                <div className="flex items-center text-sm text-gray-500">
                  <CalendarIcon size={16} className="mr-1" />
                  {article.date}
                </div>
                <div className="flex items-center text-sm text-gray-500">
                  <ClockIcon size={16} className="mr-1" />
                  {article.readTime}
                </div>
                <div className="flex space-x-2">
                  <button className="p-2 bg-cream rounded-full hover:bg-cream/70 transition-colors">
                    <BookmarkIcon size={18} className="text-gray-600" />
                  </button>
                  <button className="p-2 bg-cream rounded-full hover:bg-cream/70 transition-colors">
                    <ShareIcon size={18} className="text-gray-600" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Featured Image */}
          <div className="mb-8">
            <img src={article.image} alt={article.title} className="w-full h-auto rounded-lg" />
          </div>
          {/* Article Content */}
          <div className="prose prose-lg max-w-none mb-12">
            <div dangerouslySetInnerHTML={{
            __html: article.content
          }} />
          </div>
          {/* Author Bio */}
          <div className="bg-white p-6 rounded-lg shadow-sm mb-12">
            <div className="flex flex-col md:flex-row items-center md:items-start">
              <img src={article.author.image} alt={article.author.name} className="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6" />
              <div>
                <h3 className="font-nunito font-semibold text-xl mb-2 text-center md:text-left">
                  {article.author.name}
                </h3>
                <p className="text-gray-500 font-medium mb-3 text-center md:text-left">
                  {article.author.title}
                </p>
                <p className="text-gray-600">{article.author.bio}</p>
              </div>
            </div>
          </div>
          {/* Share Article */}
          <div className="border-t border-b border-gray-200 py-6 mb-12">
            <div className="flex flex-col md:flex-row items-center justify-between">
              <h3 className="font-nunito font-semibold text-lg mb-4 md:mb-0">
                Share this article
              </h3>
              <div className="flex space-x-3">
                <a href="#" className="p-3 bg-[#1877F2] text-white rounded-full hover:bg-opacity-90 transition-colors">
                  <FacebookIcon size={20} />
                </a>
                <a href="#" className="p-3 bg-[#1DA1F2] text-white rounded-full hover:bg-opacity-90 transition-colors">
                  <TwitterIcon size={20} />
                </a>
                <a href="#" className="p-3 bg-[#0A66C2] text-white rounded-full hover:bg-opacity-90 transition-colors">
                  <LinkedinIcon size={20} />
                </a>
                <button className="p-3 bg-cream text-dark rounded-full hover:bg-cream/70 transition-colors">
                  <ShareIcon size={20} />
                </button>
              </div>
            </div>
          </div>
          {/* Related Articles */}
          <div className="mb-12">
            <div className="flex justify-between items-center mb-6">
              <h2 className="font-nunito font-semibold text-2xl text-dark">
                You May Also Like
              </h2>
              <Link to="/articles" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
                View all articles
                <ChevronRightIcon size={16} className="ml-1" />
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {article.relatedArticles.map(relatedArticle => <Link key={relatedArticle.id} to={`/articles/${relatedArticle.id}`} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                  <div className="aspect-[16/9] w-full">
                    <img src={relatedArticle.image} alt={relatedArticle.title} className="w-full h-full object-cover" />
                  </div>
                  <div className="p-5">
                    <div className="flex items-center mb-3">
                      <span className="inline-block px-2.5 py-0.5 bg-green/20 text-green rounded-full text-xs font-medium">
                        {relatedArticle.category}
                      </span>
                    </div>
                    <h3 className="font-nunito font-semibold text-lg mb-2 line-clamp-2">
                      {relatedArticle.title}
                    </h3>
                    <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                      {relatedArticle.excerpt}
                    </p>
                    <div className="flex items-center text-xs text-gray-500">
                      <span className="flex items-center">
                        <CalendarIcon size={14} className="mr-1" />
                        {relatedArticle.date}
                      </span>
                      <span className="mx-2">•</span>
                      <span className="flex items-center">
                        <ClockIcon size={14} className="mr-1" />
                        {relatedArticle.readTime}
                      </span>
                    </div>
                  </div>
                </Link>)}
            </div>
          </div>
          {/* Newsletter */}
          <div className="bg-terracotta/10 rounded-lg p-6 border border-terracotta/20">
            <div className="flex flex-col md:flex-row items-center justify-between">
              <div className="mb-4 md:mb-0 md:mr-6">
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  Subscribe for More Articles
                </h3>
                <p className="text-gray-600 text-sm">
                  Get expert advice and in-depth guides delivered straight to
                  your inbox.
                </p>
              </div>
              <div className="w-full md:w-auto">
                <form className="flex flex-col sm:flex-row gap-3">
                  <input type="email" placeholder="Your email address" className="px-4 py-2.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-terracotta/50 w-full" required />
                  <button type="submit" className="px-5 py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium whitespace-nowrap">
                    Subscribe
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};